<template>
    <h3>作者列表</h3>
    <el-table :data="authors" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column  label="客户" width="250">
            <template #default="scope">
                <div>
                   {{ scope.row.firstName+"."+scope.row.lastName}} 
              </div>
            </template>
            </el-table-column>
        
        <el-table-column label="出生日期" width="200">
            <template #default="scope">
                <div>
                    {{ formatDate(scope.row.birthDate) }}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="nationality" label="国籍" width="200" />
        <el-table-column label="操作" width="200">
            <template #default="scope">
                <div>
                    <el-button @click="toBookByPublisher(scope.row.id,scope.row.firstName,scope.row.lastName)" type="primary" plain>查看所有的作品</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { useRouter, useRoute } from 'vue-router'
import axios from '../axios'
const router = useRouter()

const authors = reactive([]);
onMounted(async () => {
    const resp= await axios.get("/api/authors");
    authors.push(...resp.data)
})
function toBookByPublisher(id,firstName,lastName){
    router.push({path:'booksByAuthor/'+id,query:{firstName,lastName}})
}
function formatDate(s) {
    const date = new Date(s);
    const formatDate = date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
    return formatDate;
}

</script>